<template>
  <div v-if="status == 1">
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="depotDataForm"
        :model="depotDataForm"
        :rules="rules"
        label-width="125px"
        label-position="right"
        label-suffix=":"
      >
        <h3>{{ $t("unownedGoodsLang.unGoodsInfo") }}</h3>
        <el-form-item :label="$t('depotLang.depotStatus')" prop="statusName">
          <div style="margin-left: 5px">{{ depotDataForm.statusName }}</div>
        </el-form-item>
        <el-form-item :label="$t('unownedGoodsLang.backOrderNum')" prop="returnNo">
          <span>{{ depotDataForm.returnNo }}</span>
        </el-form-item>
        <el-form-item :label="$t('unownedGoodsLang.pic')" prop="pictures">
          <template>
            <div class="image-container">
              <el-image
                v-for="url in urls"
                :key="url"
                class="image-item"
                :src="url"
                :preview-src-list="urls"
                @dblclick="toggleZoom($event)"
              />
            </div>
          </template>
        </el-form-item>
        <div style="margin-left: 10%">
          <el-button
            type="primary"
            size="small"
            @click="handleClaim"
          >{{ $t("unownedGoodsLang.claim") }}
          </el-button>
        </div>

        <div v-if="selectVisible" style="margin-top: 30px">
          <el-form-item :label="$t('backOrderLang.originalOutNo')" prop="trackingNo">
            <el-input
              v-model="depotDataForm.trackingNo"
              :placeholder="$t('pleaseEnter')"
              clearable
              style="width: 40%;margin-right: 20px"
            />
            <el-button
              type="primary"
              size="small"
              @click="handleSelect"
            >{{ $t("query") }}
            </el-button>
          </el-form-item>
          <div v-if="detailVisible">
            <el-form-item :label="$t('goodsSKULang.customerCode')" prop="customCode">
              <span>{{ depotDataForm.customCode }}</span>
            </el-form-item>
            <el-form-item :label="$t('backOrderLang.originalMaterialFlowOrderNum')" prop="originalMaterialFlowOrderNum">
              <span>{{ depotDataForm.providerTrackingNo }}</span>
            </el-form-item>
            <el-form-item :label="$t('backOrderLang.originalOMSNum')" prop="originalOMSNum">
              <span>{{ depotDataForm.trackingNo }}</span>
            </el-form-item>
            <!--产品信息-->
            <el-form-item :label="$t('goodsSKULang.baseSkuInfoDTO')">
              <el-table :data="depotDataForm.skuListData" border class="mt-10">
                <el-table-column
                  :label="$t('goodsSKULang.skuCode')"
                  prop="skuCode"
                  align="center"
                />
                <el-table-column
                  :label="$t('goodsSKULang.goodsName')"
                  prop="goodsName"
                  align="center"
                />
                <el-table-column
                  :label="$t('goodsSKULang.skuNum')"
                  prop="skuNum"
                  align="center"
                />
              </el-table>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button
          :disabled="!detailVisible"
          type="primary"
          size="small"
          :loading="submitLoading"
          @click="handleSubmit"
        >{{ $t("submit") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
  <div v-else>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="depotDataForm"
        :model="depotDataForm"
        label-width="125px"
        label-position="right"
        label-suffix=":"
      >
        <h3>{{ $t("unownedGoodsLang.unGoodsInfo") }}</h3>
        <el-form-item :label="$t('depotLang.depotStatus')">
          <div style="margin-left: 5px">{{ $t("statusLang." + getTitleByValue(unownedStatusOptions, depotDataForm.status)) }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('unownedGoodsLang.backOrderNum')" prop="returnNo">
          <span>{{ depotDataForm.returnNo }}</span>
        </el-form-item>
        <el-form-item :label="$t('unownedGoodsLang.pic')" prop="pictures">
          <template>
            <div class="image-container">
              <el-image
                v-for="url in urls"
                :key="url"
                class="image-item"
                :src="url"
                :preview-src-list="urls"
                @dblclick="toggleZoom($event)"
              />
            </div>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { unownedStatusOptionDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import { getInfo, claim } from '@/api/business/operateManage/unownedGoods'
import { queryOutboundOrderPageList } from '@/api/business/outboundManage/invoicing'
export default {
  name: 'DepotForm',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '70%'
    }
  },
  data() {
    return {
      urls: [],
      zoomed: false,
      status: 1,
      selectVisible: false,
      detailVisible: false,
      isVisible: false,
      unownedStatusOptions: getDictOptionList(unownedStatusOptionDict),
      submitLoading: false,
      getTitleByValue: getTitleByValue,
      depotDataForm: {
        returnNo: null,
        trackingNo: null
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      if (!this.value || this.operation === 1) return
      const res = await getInfo({
        noCustomerId: this.value
      })
      if (!res || res.data === null) return
      this.depotDataForm = res.data
      this.urls = res.data.pictures
      this.status = res.data.status
    },
    toggleZoom(event) {
      const img = event.target;
      if (!this.zoomed) {
        img.style.transform = 'scale(2)';
        img.style.transition = 'transform 0.25s ease';
      } else {
        img.style.transform = 'scale(1)';
      }
      this.zoomed = !this.zoomed;
    },
    // 点击认领
    async handleClaim() {
      this.selectVisible = true
    },
    // 根据原物流单号查询
    async handleSelect() {
      if (!this.depotDataForm.trackingNo) {
        this.$message.error(this.$t('pleaseEnter') + this.$t('backOrderLang.originalLogisticsTrackingNum'))
        return
      }
      const res = await queryOutboundOrderPageList({
        orderNo: this.depotDataForm.trackingNo
      })
      if (!res.data.dataList) {
        this.$message.error(this.$t('backOrderLang.tip5'))
        return
      }
      const basicData = res.data.dataList[0]
      this.depotDataForm.customCode = basicData.customerCode
      this.depotDataForm.providerTrackingNo = basicData.providerTrackingNo
      this.depotDataForm.platformNo = basicData.platformOrderNo
      this.depotDataForm.trackingNo = basicData.trackingNo
      const tmpGoodsList = []
      basicData.goodsList.forEach(item => {
        tmpGoodsList.push({
          skuCode: item.goodsSkuCode,
          goodsName: item.goodsName,
          skuNum: item.goodsQuantity,
          skuId: item.goodsSkuId
        })
      })
      this.depotDataForm.skuListData = tmpGoodsList
      this.detailVisible = true
    },
    // 提交
    async handleSubmit() {
      const res = await claim({
        noCustomerId: this.depotDataForm.id
      })
      if (res.returnCode === 10000) {
        this.$message.success(this.$t('handleSuccess'))
        this.$emit('close')
      } else {
        this.$message.error(res.returnMsg)
      }
    },
    // 关闭
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    }
  }
}

</script>

<style>
.image-container{
  display: flex; /* 将容器设置为 Flex 容器 */
  flex-wrap: wrap; /* 当图片超出容器宽度时换行显示 */
}
.image-item{
  width: 20%; /* 控制单个图片的宽度，这里假设一行最多显示5张图片 */
  margin-right: 10px; /* 控制图片之间的间距 */
  margin-bottom: 10px; /* 控制图片行之间的间距 */
}
.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  width: 200px; /* 根据需要调整 */
  height: 200px; /* 根据需要调整 */
  object-fit: cover;
  cursor: pointer;
}

.image-item.zoomed {
  transform: scale(2);
  transition: transform 0.25s ease;
}
</style>
